[email protected] Form的常用方法

您所在的位置：网站首页 › x form › [email protected] Form的常用方法

[email protected] Form的常用方法

2023-07-21 11:32| 来源: 网络整理| 查看: 265

[email protected]和[email protected]有些地方区别还是挺大的。

Form表单的一个常规写法：

1.通过 Form.useForm 对表单数据域进行交互。 const [form] = Form.useForm(); //这里用form要使用在钩子函数里，可以配合react的hook使用，如果使用react生命周期开发的话可以给form表单添加ref来获取表单数据或者修改数据，（this.formRef = React.createRef();）获取表单数据：this.formRef.current.getFieldsValue()。this.formRef.current.validateFields().then().catch()

const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 },};

const validateMessages = { required: '${label} is required!', types: { email: '${label} is not a valid email!', number: '${label} is not a valid number!', }, number: { range: '${label} must be between ${min} and ${max}', },};

登录重置表单

2.获取对应字段名的值。用法：

form.getFieldValue('name')； form.getFieldValue('password')

3.设置表单的值，更新对应的值，用法：

form.setFieldsValue({ name: 'ming', password: '111222'});

4.获取Form全部字段名对应的值，会按照对应结构返回。用法：

form.getFieldsValue()

5.触发表单验证。用法：

form.validateFields().then(value => {

// 验证通过后进入 const { name,password} = value; console.log(name, password);

}).catch(err => { // 验证不通过时进入 console.log(err); });

6.提交表单，与点击 submit 按钮效果相同，会走 onFinish 方法。用法： form.submit()}> 提交 // 与下面效果一样提交 7.重置一组字段到 initialValues。用法: form.resetFields();

8.获取光标方法：

form.getFieldInstance('name').focus();

【本文地址】

[email protected] Form的常用方法

[email protected] Form的常用方法

今日新闻

推荐新闻